<script  setup>
import l1 from "@/views/fistlist.vue"
import l2 from "@/views/secondlist.vue"
import {ref} from "vue"
import { useRoute } from 'vue-router'

const route = useRoute()


function gettime(){
  let now = new Date()
  return (now.getFullYear()+"-"+(now.getMonth()+1).toString().padStart(2,'0')+"-"+now.getDate().toString().padStart(2,'0'))
}

let datas = ref([])
fetch("http://127.0.0.1:5000/firstli",{
  mode:"cors",
  credentials:"include",
}).then(res => res.json()).then(res => {
  datas.value = res
})




let currentstate = ref("all")
let isdate = ref(false)

function addl1() {
  let title = "新建待办事项"+(datas.value.length+1)+"（双击编辑）"
  fetch(`http://127.0.0.1:5000/addfirstli?title=${title}`)
  datas.value.push({
    title:title,
    son:[]
  })
  currentindex.value=datas.value.length-1
}
let currentindex = ref(0)
function abc(index){
  currentindex.value = index
  if (datas.value[currentindex.value]){
  fetch(`http://127.0.0.1:5000/secondli?pid=${datas.value[currentindex.value].id}`).then(res => res.json()
  ).then(res => {
  datas.value[currentindex.value].son = res
})}
}

function getl2(){
  if (datas.value[currentindex.value] && datas.value[currentindex.value].son != null){
    if (isdate.value){
      let result = datas.value[currentindex.value].son.filter(item=>item.date == gettime())
      if (currentstate.value=="all"){
      return result
    }else if(currentstate.value=='true'){
      return result.filter(item=>item.state == 'true')
    }else if(currentstate.value=='false'){
      return result.filter(item=>item.state == 'false')
    }
    }else {
    if (currentstate.value=="all"){
      return datas.value[currentindex.value].son
    }else if(currentstate.value=='true'){
      let result = datas.value[currentindex.value].son.filter(item=>item.state == 'true')
      return result
    }else if(currentstate.value=='false'){
      let result = datas.value[currentindex.value].son.filter(item=>item.state == 'false')
      return result
    }
    }
  }else{
    return {}
  }
}


function dell1(index){
  currentindex.value = index
  fetch(`http://127.0.0.1:5000/deletefirstli?id=${datas.value[currentindex.value].id}`)
  datas.value.splice(index,1)
}
</script>
<template>
  <div class="common-layout">
    <el-container>
      <el-header style="width: 100%;height: 10vh;text-align: center;line-height: 10vh;background-color: #777777" >待办事项列表</el-header>
      <el-container>

        <el-aside style="width:15%;height: 90vh;background-color: lightblue;position: relative;">
          <div class="btn">
            <RouterLink :to="'/l2/'+route.params.id+'/'+isdate+'/'+currentstate"><el-button :type="route.params.state == 'all'?'success':'primary'" icon="Grid" @click="currentstate = 'all'">全部</el-button></RouterLink>
            <RouterLink :to="'/l2/'+route.params.id+'/'+isdate+'/'+currentstate"><el-button :type="route.params.state == 'true'?'success':'primary'" icon="CircleCheck" @click="currentstate = 'true'">已完成</el-button></RouterLink>
            <RouterLink :to="'/l2/'+route.params.id+'/'+isdate+'/'+currentstate"><el-button :type="route.params.state == 'false'?'success':'primary'" icon="Warning" @click="currentstate = 'false'">未完成</el-button></RouterLink>
            <RouterLink :to="'/l2/'+route.params.id+'/'+isdate+'/'+currentstate"><el-button :type="route.params.date == true?'success':'primary'" icon="Calendar" @click="isdate = !isdate">今日</el-button></RouterLink>
          </div>

          <l1 :datas="datas" attr="title" @aaa-bbb="abc" @del='dell1' :currentindex="currentindex" :isdate="isdate" :currentstate="currentstate" ></l1>
          <el-button class="add1" type="primary" icon="Plus" @click="addl1">添加新的待办事项</el-button>
        </el-aside>

        <el-main>

          <RouterView :key="route.path"></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<style>
body{
  padding: 0;margin: 0;
}
.btn{
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.el-button+.el-button{
  width: 80px;
}
button.el-button.el-button--success {
  margin: 0 0  10px 0;
}
button.el-button.el-button--primary{
  margin: 0 0  10px 0;
}

.add1{
  position: absolute;
  bottom: 0;left: 0;
  margin: auto;
}
</style>